<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#jia{
				margin: 10px 0;
			}
			table{
				width: 80%;
				border: solid 1px red;
				border-collapse: collapse;
			}
			#tbody td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="">
			用户名:<input type="text" name="user" id="username" value="张三" placeholder="请输入用户名" /><br>
			年龄:<input type="text" name="" id="age" value="18" placeholder="请输入年龄" /><br>
			<div id="sex">
				性别：<br>
				<label>
					<input type="radio" name="sex" id="" value="0" />男
				</label>
				<label>
					<input type="radio" name="sex" id="" value="1" />女
				</label>
			</div>
			<div id="hobby">
				爱好：
				<input type="checkbox" id="" value="h1" />学习
				<input type="checkbox" id="" value="h2" />健身
				<input type="checkbox" id="" value="h3" />游泳
				<input type="checkbox" id="" value="h4" />工作
				<input type="checkbox" id="" value="h5" />看电影
				<div id="">
					<input type="checkbox" id="checkAll" />全选/全不选
				</div>
				<button type="button" id="notCheck">反选</button>
			</div>
			<div id="school">
				学历：
				<select name="">
					<option value="s1">小学</option>
					<option value="s2">初中</option>
					<option value="s3">高中</option>
					<option value="s4">大学</option>
				</select>
			</div>
			
		</div>
		
		<button type="button" id="jia">添加</button>
		
		<table border="" cellspacing="" cellpadding="">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>学历</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<!-- <tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>男</td>
					<td>初中</td>
					<td>学习</td>
					<td>
						<button type="button" onclick=del()>删除</button>
					</td>
				</tr> -->
			</tbody>
		</table>
		
		<script type="text/javascript">
			var username = document.getElementById("username");
			var age = document.getElementById("age");
			var sex = document.querySelectorAll("#sex>label input");
			// var hobby = document.querySelectorAll("#hobby input");
			var school = document.querySelector("#school>select");
			var tbody = document.getElementById("tbody");
			var jia = document.getElementById("jia");
			
			// console.log(username)
			// console.log(sex)
			// console.log(hobby)
			console.log(school)
			var arr = [];
			
			/* window.onload = function(){
				if (arr = localStorage.arr) {
					arr = JSON.parse(localStorage.arr);
					show(arr);
				} else{
					arr = [];
				}
			} */
			
			
			
			
			jia.onclick = function(){
				if (username.value == ""||age.value == "") {
					alert("请正确输入用户名和年龄");
				} else{
					var sex=getUserSex();
					var hobby=getUserHobyy();
					var obj = {
						id:+new Date(),
						username:username.value,
						age:age.value,
						sex:sex,
						school:school.value,
						hobby:hobby
					}
				}
					arr.push(obj);
					show(arr);
					// localStorage.arr = JSON.stringify(arr);
					username.value = ""
					age.value = ""
			}
			
			
			function getUserSex(){
				var sexIpts=document.querySelectorAll("#sex>label input");
				//console.log("sexIpts:",sexIpts);
				var sex;
				if(sexIpts[0].checked){
					sex=sexIpts[0].value;
				}else{
					sex=sexIpts[1].value;
				}
				return sex;
			}
			
			function getUserHobyy(){
				var hobbyIpts=document.querySelectorAll("#hobby input");
				//console.log("hobbyIpts",hobbyIpts);
				var hobby=[];
				for(var i=0;i<hobbyIpts.length;i++){
					if(hobbyIpts[i].checked){
						hobby.push(hobbyIpts[i].value);
					}
				}
				return hobby;
			}
			
			
			
			var checkAll=document.getElementById("checkAll");
			checkAll.onclick=function(){
				//console.log("this:",this);
				//console.dir(this);
				var f=this.checked;
				//console.log("f:",f);
				
				var ipts=document.querySelectorAll("#hobby input");
				//console.log("ipts:",ipts);//
				
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked=f;//代表当前这个复选框被选中
				}
			}
			
			//反选
			var notCheck=document.getElementById("notCheck");
			notCheck.onclick=function(){
				var ipts=document.querySelectorAll("#hobby input");
				//console.log("ipts:",ipts);//
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked= !ipts[i].checked;//当前这个复选框取反
				}
				fn1();
			}
			
			//是否需要选中 全选
			var ipts=document.querySelectorAll("#hobby input");
			for(var i=0;i<ipts.length;i++){
				ipts[i].onclick=function(){
					fn1();
				}
			}
			
			
			function fn1(){
				var f=true;
				for(var a=0;a<ipts.length;a++){
					if(!ipts[a].checked){
						f=false;
						break;
					}
				}
				checkAll.checked=f;
			}
			
			
			
			
			
			
			function show(arr){
				tbody.innerHTML = "";
				for (var i = 0; i < arr.length; i++) {
					tbody.innerHTML +=`
					<tr>
						<td>${i+1}</td>
						<td>${arr[i].username}</td>
						<td>${arr[i].age}</td>
						<td>${arr[i].sex=="0"?"男":"女"}</td>
						<td>${setEducation(arr[i].school)}</td>
						<td>${setHobby(arr[i].hobby)}</td>
						<td>
							<button type="button" onclick=del(${arr[i].id})>删除</button>
						</td>
					</tr>
					
					`
				}
			}
			
			function del(id){
				console.log("你要删除的id:",id);
				for (var i = 0; i < arr.length; i++) {
					if (id == arr[i].id) {
						arr.splice(i, 1)
						show(arr)
						// localStorage.arr = JSON.stringify(arr)
						
					}
				}
			}
			
			
			
			
			function setEducation(attr){
				var obj={
					s1:"小学",
					s2:"中学",
					s3:"高中",
					s4:"大学",
				}
				console.log("attr:",attr,"obj["+attr+"]:",obj[attr]);
				return obj[attr];
			}
			
			
			//返回爱好
			
			function setHobby(arr){
				console.log("arr:",arr);
				var obj={
					h1:"学习",
					h2:"健身",
					h3:"游泳",
					h4:"工作",
					h5:"看电影",
				}
				var str="";
				for(var i=0;i<arr.length;i++){
					if(i==arr.length-1){
						str+=obj[arr[i]];
					}else{
						str+=obj[arr[i]]+","
					}
				}
				console.log("str:",str)
				return str;
			}
			
			
		</script>
		
	</body>
</html>
